CSS有transition可以完成簡單的動畫
D3也有transition，而且比CSS的控制要簡單一些，功能強大一些，可以加入更多自己想要的效果
來將之前的長條圖加上一些動畫，並且做一些簡單的練習

首先先定義一開始的狀態(位置、形狀、顏色等等)

.attr("y",0)
.attr("height",0)

然後開始定義動畫
先呼叫d3中的transition來啟動動畫
.transition()
在後方放入自己要的功能

• delay : 用來延遲動畫開始的時間
• duration : 用來定義動畫所需的時間
• ease : 用來選擇物件出現的方式

在D3之中，這些功能都可以加入匿名函數來對每個物件作彈性的規劃
加完功能之後，要定義最後要去到的位置或是變成的狀態

    .attr("y",function(d){
    	return 500-linear(d);
	})
    .attr("height",function(d){
         return linear(d);
	});

定義給rect的動畫

bar.append("rect")
    .attr("y",0) //起始位置
	.transition()
	.delay(function(d,i){
    	return i * 200;
	})
	.duration(2000)
	.ease(d3.easeBounce)
	.attr("y",function(d){
    	return 500-linear(d);
	})
	.attr("height",function(d){
         return linear(d);
	});

定義給text的動畫

bar.append('text')
	.attr('y',-50)
	.attr("x",function(d,i){
         return xlinear(i)+27;
    })
	.transition()
	.delay(function(d,i){
    	return i * 250;
	})
	.duration(2000)
	.ease(d3.easeBounce)
	.attr("y",function(d){
		return 500-linear(d)-5;
	});

demo&code : https://codepen.io/FanWay/pen/ZvxXVJ